<?php $lang = "th"; 
$key1 = $lang == "en"?"PositionEN":"PositionTH";
$key2 = $lang == "en"?"LocationEN":"LocationTH";
$jobslist = $data['data'];
$maxPage = $data['MaxPage'];
?>
<div>
    <h1 class="head">Position Info</h1>
</div>
<div>
<!--    <form class="navbar-form pull-left" action="index.php?r=JobsManage/Main" method="post">
        <a href="index.php?r=JobsManage/JobFunction&mode=Add"><img src="images/add.png" title="Add" alt="Add">&nbsp;Add</a>
        <input name="key" type="text" placeholder="Search Key">
        <select name="col">
          <option selected value="JobID">JobID</option>
          <option value="<?=$key1; ?>">Position name</option>
          <option value="<?=$key2; ?>">Work place</option>
        </select>
        <button type="submit" class="btn">Search</button>
    </form>-->
<div class="panel panel-default" style=" background-color: ghostwhite; ">
        <div class="panel-body">
            <form action="index.php?r=JobsManage/Main" method="get" id="formSearch">
            <input type="hidden" name="r" value="<?=$_GET['r']?>">
            <div class="input">
                <!--<input class="span10" id="appendedInputButtons" type="text">-->
                <div class="span8">
                    <label class="control-label" for="inputKeyword"><b>Keyword:</b></label>
                    <input type="search" name="Keyword" id="inputKeyword" class="span12">
                </div>
                <div class="span4">
                    <label class="control-label" for="inputJobID"><b>Job ID:</b></label>
                    <input type="text" name="JobID" id="inputJobID" class="span12">
                </div>
            </div>
            <div>
                <div class="span12">
                    <label class="control-label" for="inputProvince"><b>Select location:</b></label>
                    <select class="span12" name="Province" id="inputProvince">
                        <option selected="selected" value="0"></option>
                        <?= GM::getOptionDropdownProvince($lang) ?>
                    </select>
                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-large btn-danger" type="button" id="btn-search"><i class="icon-search"></i> Search</button>
            </div>
            </form>
        </div>
    </div>
    <link href="css/custom.css" rel="stylesheet">
    <script type="text/javascript" src="js/icon.js"></script>
    <a href="index.php?r=JobsManage/JobFunction&mode=Add" class="btn btn-primary pull-right">Add Job</a>
    <table class="table table-striped table-hover tableJobs">
        <thead>
            <tr>
                    <th>#</th>
                    <th>JobID</th>
                    <th>Position</th>
                    <th>Work Place</th>
                    <th>State</th>
                    <th width="110em">Create Date</th>
                    <th><img src="images/mark.png" title="Urgent" alt="Urgent">Urgent</th>
                    <th></th>
                    <th></th>
                    <th></th>
            </tr>
        </thead>
        <tbody>
            <?php
                if( !empty($jobslist) ) {
                    $n=$page; 
                    foreach($jobslist as $jobs){ ?>
                <?php
                      $position = $lang == "en" ? $jobs['PositionEN'] : $jobs['PositionTH'];
                      $date = $lang == "en" ? GM::setformDateEN($jobs['CreateDate']) : GM::setformDateTH($jobs['CreateDate']);
                      $temp = JobsManage::GetProvinceName($jobs['JobID'], $lang);
                      $Province_TH = JobsManage::GetProvinceName($jobs['JobID'], "th");
                ?>
                <tr <?= "" //($n % 2 != 0)?'class=info':''?> 
                    data_jobID="<?=$jobs['JobID']; ?>"
                    data_position_EN="<?=$jobs['PositionEN']; ?>"
                    data_position_TH="<?=$jobs['PositionTH']; ?>"
                    data_sex_EN="<?=JobsManage::MapGender($jobs['Sex'], "en");?>"
                    data_sex_TH="<?=JobsManage::MapGender($jobs['Sex'], "th");?>"
                    data_age="<?=$jobs['Age'];?>"
                    data_exp="<?=$jobs['Exp'];?>"
                    data_salary="<?=$jobs['Salary'];?>"
                    data_province_EN="<?=$temp['ProvinceNAME'];?>"
                    data_province_TH="<?=$Province_TH['ProvinceNAME'];?>"
                    data_local_EN="<?=$jobs['LocationEN'];?>"
                    data_local_TH="<?=$jobs['LocationTH'];?>"
                    data_des_EN="<?=$jobs['DescriptEN'];?>"
                    data_des_TH="<?=$jobs['DescriptTH'];?>"
                    data_createdate_EN="<?=$jobs['CreateDate'];?>" 
                    data_createdate_TH="<?=GM::setformDateTH($jobs['CreateDate']);?>" >
                    <td><?=$n;?></td>
                    <td><?="&nbsp;&nbsp;&nbsp;".$jobs['JobID'];?></td>
                    <td><?=$position?></td>
                    <td><?=$temp['ProvinceNAME']?></td>
                    <td class="col_Status"><img src="images/<?= $jobs['State']!='C' ? 'accept.png' : 'disable.png';?>" data_status="<?=$jobs['State'];?>" style="cursor:pointer"></td>
                    <td><?=$date?></td>
                    <td class="col_Urgent"><input class="chBOX" type="checkbox" <?=$jobs['State']!='C'?'':'disabled';?>  <?=$jobs['Urgent']!='N' ? 'checked' : ''?> data_urgent="<?=$jobs['Urgent'];?>"/></td>
                    <td class="col_Detail"><a href="#myModal" role="button" data-toggle="modal"><img src="images/page_white_magnify.png" title="Detail" alt="Detail"></a></td>
                    <td><a href="index.php?r=JobsManage/JobFunction&mode=Edit&jobID=<?= $jobs['JobID']; ?>"><img src="images/page_white_edit.png" title="Edit" alt="Edit"></a></td>
                    <form action="index.php?r=JobsManage/Delete" method="POST" onsubmit="return confirmDelete()">
                        <input id="jobID" name="jobID" type="hidden" value="<?= $jobs['JobID']; ?>" />
                        <td><input type="image" src="images/delete.png" title="Delete" /></td>
                    </form>
                </tr>
                <?php 
                $n++; }
                } ?>
        </tbody>
    </table>
    <?php
        $url = "index.php?r=JobsManage/Main&";
        GM::paging($url, $page, $maxPage); 
    ?>
</div>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
        <h3>Position detail</h3>
  </div>
  <div class="modal-body">
        <ul class="nav nav-tabs" id="tabZone">
            <li class="active"><a href="#EN" data-toggle="tab" title="Position detail in english">EN</a></li>
            <li><a href="#TH" data-toggle="tab" title="Position detail in thai">TH</a></li>
        </ul>
        <div class="tab-content">
            <div class ="tab-pane  active" id="EN">
                <table class="table table-bordered table-striped">
                    <tr><th>JobID#</th>
                        <td id="job_id"></td></tr>
                    <tr><th>Position</th>
                        <td id="positionEN"></td></tr>
                    <tr><th>Gender</th>
                        <td id="gender"></td></tr>
                    <tr><th>Age</th>
                        <td id="age"></td></tr>
                    <tr><th>Salary</th>
                        <td id="salary"></td></tr>
                    <tr><th>Experience</th>
                        <td id="exp"></td></tr>
                    <tr><th>Province</th>
                        <td id="province"></td></tr>
                    <tr><th>Lacation</th>
                        <td id="locationEN"></td></tr>
                    <tr><th>Jobs Description</th>
                        <td id="desEN"></td></tr>
                    <tr><th>State</th>
                        <td id="state"></td></tr>
                    <tr><th>Create Date</th>
                        <td id="createdate"></td></tr>
                </table>
            </div>
            <div class ="tab-pane" id="TH">
                <table class="table table-bordered table-striped">
                    <tr><th>JobID#</th>
                        <td id="job_id_TH"></td></tr>
                    <tr><th>ตำแหน่ง</th>
                        <td id="positionTH"></td></tr>
                    <tr><th>เพศ</th>
                        <td id="gender_TH"></td></tr>
                    <tr><th>อายุ</th>
                        <td id="age_TH"></td></tr>
                    <tr><th>เงินเดือน</th>
                        <td id="salary_TH"></td></tr>
                    <tr><th>ประสบการณ์</th>
                        <td id="exp_TH"></td></tr>
                    <tr><th>จังหวัด</th>
                        <td id="province_TH"></td></tr>
                    <tr><th>ที่อยู่</th>
                        <td id="locationTH"></td></tr>
                    <tr><th>รายละเอียดงาน</th>
                        <td id="desTH"></td></tr>
                    <tr><th>สถานะตำแหน่ง</th>
                        <td id="state_TH"></td></tr>
                    <tr><th>วันที่สร้าง</th>
                        <td id="createdate_TH"></td></tr>
                </table>
            </div>
        </div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

<script type="text/javascript">
    $(function(){
       $('.tableJobs tbody').on('click', '.col_Status img',function(){
            editState($(this));
        });
        
       $('.tableJobs tbody').on('click', '.col_Detail img',function(){
            showDetail($(this));
        }); 
        
       $('.tableJobs tbody').on('click', '.col_Urgent input[type=checkbox]',function(){
            changeUrgent($(this));
       });
       
       
       // get value in form search
        $('#inputKeyword').val('<?= isset($_GET['Keyword']) ? $_GET['Keyword'] : '' ?>');
        $('#inputJobID').val('<?= isset($_GET['JobID']) ? $_GET['JobID'] : '' ?>');
        $('#inputProvince').val('<?= isset($_GET['Province']) ? $_GET['Province'] : '' ?>');
        
        $('#btn-search').click(function(){
            document.getElementById("formSearch").submit();
        });
        
    });
    
    function showDetail($obj) {
        $row = $obj.parent().parent().parent();
        $statusRow = $row.find('td.col_Status img').attr('data_status');
        $checkboxRow = $row.find('td input[type=checkbox]').attr('data_urgent');
        var state_EN;
        var state_TH;
        if($statusRow == 'O') {
            if($checkboxRow == 'U') {
                state_EN = "Urgent";
                state_TH = "ต้องการด่วน";
            } else {
                state_EN = "Open";
                state_TH = "เปิดรับสมัคร";
            }
        } else {
            state_EN = "Close";
            state_TH = "ปิดรับสมัคร";
        }
        $('#job_id , #job_id_TH').text($row.attr('data_jobID'));
        $('#positionEN').text($row.attr('data_position_EN'));
        $('#positionTH').text($row.attr('data_position_TH'));
        $('#gender').text($row.attr('data_sex_EN'));
        $('#gender_TH').text($row.attr('data_sex_TH'));
        $('#age').text($row.attr('data_age') + " years old");
        $('#age_TH').text($row.attr('data_age') + " ปี");
        $('#exp').text($row.attr('data_exp') + " year");
        $('#exp_TH').text($row.attr('data_exp') + " ปี");
        $('#salary').text($row.attr('data_salary') + " ฿");
        $('#salary_TH').text($row.attr('data_salary') + " บาท");
        $('#province').text($row.attr('data_province_EN'));
        $('#province_TH').text($row.attr('data_province_TH'));
        $('#locationEN').text($row.attr('data_local_EN'));
        $('#locationTH').text($row.attr('data_local_TH'));
        $('#desEN').html($row.attr('data_des_EN'));
        $('#desTH').html($row.attr('data_des_TH'));
        $('#state').text(state_EN);
        $('#state_TH').text(state_TH);
        $('#createdate').text($row.attr('data_createdate_EN'));
        $('#createdate_TH').text($row.attr('data_createdate_TH'));
    }
    
    function confirmDelete() {
        return confirm("ยืนยันการลบ")?TRUE:FALSE;
    }
    
    function changeUrgent(obj) {
        var id = obj.parent().parent().attr('data_jobID');
        var status = obj.attr('data_urgent');
        //alert(id + " : " + status);
        $.post('index.php?r=JobsManage/ChangeUrgent', {
            JobID: id,
            Urgent: (status == 'U')? 'N' : 'U'
        }, function(data){
            if(data>0){
                if(status == 'U'){
                    obj.attr('data_urgent','N');
                        //alert("Changed to normal.");
                    
                } else {
                    obj.attr('data_urgent','U');
                        //alert(" Changed to Urgent.");
                }
            }
        }, 'text');
    }
    
    function editState(objJQ) {
        var id = objJQ.parent().parent().attr('data_jobID');
        var status = objJQ.attr('data_status');
        var checkBOX = objJQ.parent().parent();
        checkBOX = checkBOX.find('td.col_Urgent input');
        $.post('index.php?r=JobsManage/Status', {
            JobID: id,
            Status: (status == 'O')?'C':'O'
        }, function(data){
            if(data>0){
                if(status == 'O'){
                    objJQ.attr('src', 'images/disable.png');
                    objJQ.attr('data_status', 'C');
                    checkBOX.attr('disabled',true);
                    
                } else {
                    objJQ.attr('src', 'images/accept.png');
                    objJQ.attr('data_status', 'O');
                    checkBOX.attr('disabled',false);
                }
            }
        }, 'text');
    }
    
</script>

<style>
    .head{
        font-weight:bold;
        color: #003080;
    }
    
    th {
        text-align: center;
    }    
    
    hr {
        color: #f00;
        background-color: #f00;
        height: 5px;
    }
    
    .chBOX {
        position:relative;
        left:2em;
    }
    
    #check_urgent {
        position:absolute;
        left:77em;
    }
    
</style>